<template>
    <div>
        <ul>
            <li v-for="(v, index) in dl" :key="index" @click="clickthis(v.proid)">
                <img :src="v.img1" alt="">
                <p>{{ v.proname }}</p>
                <span>{{ v.category }}</span>
                <span>{{ v.brand }}</span>
                <p class="pri">￥{{ v.originprice }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import service from '@/utils/service';
export default {
    data() {
        return {
            dl: []
        }
    },
    mounted() {
        service({
            url: "http://118.178.238.19:3001/api/pro/search",
            params: {
                limitNum: 25,
            },
            method: 'get',
        }).then((res) => {
            this.dl = res.data.data
        })
    },
    methods: {
        clickthis(id) {
            this.$router.push({
                path: '/detail1',
                query: {
                    cid: id
                }
            })
        }
    }
}
</script>

<style scoped>
ul {
    column-count: 2;
    background: #eee;
    column-gap: 8px;
    -webkit-column-break-inside: avoid;
    margin-bottom: 50px;
    padding: 0 10px;
}

li {
    background: #fff;
    margin: 10px 0;
    border-radius: 15px;
    overflow: hidden;
}

li span {
    padding: 3px;
    background: pink;
    color: #fff;
    border-radius: 10px;
}

li .pri {
    color: red;
    font-size: 18px;
}

li img {
    width: 156.5px;
    height: 156.5px;
}

p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 5px;
}
</style>